<template>
    <div class="category-container">
        <TopSearch></TopSearch>
        <div class="main">
            <div class="categorymenu">
                <div class="wraper" @click="scrollEvent">
                    <div class="title" :class="{ 'active': activeIndex === index }" v-for="(item, index) in categoryList"
                        :key="item.id" @click="changeCate(index)">{{ item.title }}</div>
                </div>

            </div>

            <div class="categoryList" @mousewheel="scrollHandler">
                <div class="list-wraper">
                    <div :id="`category${index}`" @click="tocategory(item.id,item.title)"  class="categorycard" v-for="(item, index) in categoryList" :key="item.id">
                        <div class="card-top">
                            <div class="cardtop-title" :class="{ 'active': activeIndex === index }">{{ item.title }}</div>
                            <div class="cardtop-arrows">></div>
                        </div>

                        <div class="twolevel">
                            <div class="twotext mr-10" v-for="item2 in item.subCategories[0].metadataValues"
                                :key="item2.id"
                                @click="tocategory(item.id,item2.name,$event)">
                                {{ item2.name }}</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import categoryApi, { type CategoryListModel } from '@/api/category'

const router = useRouter()


// 分类二级
const tocategory = (id:number,title:string,$event?:Event) => {
    $event?.stopPropagation();
    router.push({
        name:'CategoryId',
        params:{
            id,
            title
        }
    })
}











// 获取页面滚动距离
const scrollHandler = (e:any) => {
    e
    DOMlist.value = Array.from(document.getElementsByClassName('categorycard'))
    // console.dir(DOMlist.value)
    // console.dir(e.target.offsetTop)
    // console.dir(e)
    // DOMlist.value.forEach((item,index) => {
    //     console.log(item.offsetTop)
    // })
}





// 一级分类改变
const changeCate = (index: number) => {
    activeIndex.value = index;

    console.log(document.getElementById(`category${index}`))
    document.getElementById(`category${index}`)?.scrollIntoView(true)
}



const categoryList = ref<CategoryListModel[]>([])
const activeIndex = ref(0)
const getCategoryList = async () => {
    try {
        let res = await categoryApi.getCategoryList()
        // console.log(res);
        
        categoryList.value = res
        // console.log(res)
    } catch (error) {
        console.error(error)
    }
}

// 侧边栏滚动事件
const scrollEvent = (e: any) => {
    // console.dir(e)
    document.getElementsByClassName('categorymenu')[0].scrollTo(0, e.target.offsetTop - 54)
}

// Dom数组
const DOMlist = ref<Element[]>([])

// watch(() => document.body.scrollTop, (val) => {
//     console.log(val)
// }, { deep: true })

onMounted(() => {
    getCategoryList()
    

})


</script>


<style scoped lang="scss">
.category-container {
    .main {
        display: flex;

        .categorymenu {
            width: 25%;
            font-size: 14px;
            color: #666;
            margin-right: 20px;
            height: 600px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                width: 0 !important
            }

            .wraper {
                .title {
                    height: 50px;
                    width: 90px;
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #eee;
                }

                .active {
                    position: relative;

                    &::before {
                        content: '';
                        display: block;
                        width: 3px;
                        height: 40px;
                        position: absolute;
                        background-color: #f86442;
                        top: 4px
                    }
                }
            }

            // height: 100%;

        }

        .categoryList {
            height: 600px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                width: 0 !important
            }

            .list-wraper {
                position: relative;
                .categorycard {
                    width: 250px;

                    .card-top {
                        border-bottom: 1px solid #eee;
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        height: 50px;
                        line-height: 50px;

                        .cardtop-title {
                            font-weight: bold;
                        }

                        .active {
                            color: #f86442;
                            font-weight: normal;
                        }

                        .cardtop-arrows {
                            color: #999;
                        }
                    }

                    .twolevel {
                        display: flex;
                        font-size: 14px;
                        flex-wrap: wrap;
                        padding-top: 10px;

                        .twotext {
                            // width: 60px;
                            height: 30px;
                            line-height: 30px;
                            color: #777;
                        }


                    }
                }
            }

        }
    }
}
</style>
